<template>
  <div class="recommend" >
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption" v-if="bannerList.length>0">
      <swiper-slide v-for="item in bannerList" :key="item.bannerId">
        <img :src="item.pic">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <music-loading v-else></music-loading>

    <!-- 编辑推荐 -->
    <list-item>编辑推荐</list-item>
    <div class="list" v-if="recommendList.length>0" >
      <router-link :to="`/playList/${list.id}`" v-for="list in recommendList" :key="list.id" class="item">
        <img-item :item="list"></img-item>
      </router-link>
    </div>
    <music-loading v-else></music-loading>
    

    <!-- 最新音乐 -->
    <list-item>最新音乐</list-item>
    <song-item :item="songList" @play="$emit('play',$event)" v-if="songList.length>0"></song-item>
    <music-loading v-else></music-loading>
    
    
    <!-- 热门MV -->
    <list-item>热门MV</list-item>
    <div class="list" v-if="MvList.length>0" >
      <router-link :to="`/mv/${list.id}`" v-for="list in MvList" :key="list.id" class="item">
        <img-item :item="list"></img-item>
      </router-link>
    </div>
    <music-loading v-else></music-loading>

    <!-- 热门歌手 -->
    <list-item>热门歌手</list-item>
    <div class="list" v-if="SingerList.length>0" >
      <router-link :to="`/singer/${list.id}`" v-for="list in SingerList" :key="list.id" class="item">
        <img-item :item="list"></img-item>
      </router-link>
    </div>
    <music-loading v-else></music-loading>
    
    <router-view></router-view>
  </div>
  
</template>
<script>
import ListItem from "@/components/ListItem.vue";
import ImgItem from "@/components/ImgItem.vue";
import SongItem from "@/components/SongItem.vue";
import MusicLoading from "@/components/MusicLoading.vue"


import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: "Recommend",
  data() {
    return {
      recommendList: [],
      songList:[],
      bannerList:[],
      MvList:[],
      SingerList:[],
      swiperOption: {
          autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          loop:true,
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
      }
    };
  },
  created() {
    this.getCommendList();
    this.getSongList();
    this.getBannerList();
    this.getMvList();
    this.getSingerList();
  },
  methods: {
    async getCommendList() {
      let res = await this.axios.get("/personalized?limit=6");
      this.recommendList = res.result;
    },
    async getSongList(){
      let res=await this.axios.get("/personalized/newsong?limit=10");  
      this.songList=res.result
    },
    async getBannerList(){
      let res=await this.axios.get("/banner?type=2");
      this.bannerList=res.banners
    },
    async getMvList(){
      let res=await this.axios.get("/mv/first?limit=9");
      this.MvList=res
      // console.log(this.MvList)
    },
    async getSingerList(){
      let res=await this.axios.get("/top/artists?offset=0&limit=9");
      this.SingerList=res.artists
      // console.log(this.SingerList)
    },
    
  },
  components: {
    ListItem,
    ImgItem,
    SongItem,
    Swiper, 
    SwiperSlide,
    MusicLoading,
  },
};
</script>
<style lang="less" scoped>
.recommend{
  margin-bottom: 60px;
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 33%;
    }
  }
  .swiper{
    img{
      display: block;
      width: 100%;
    }
    & /deep/ .swiper-pagination-bullet-active {
      background-color: #fff;
    }
  }
}

</style>
